<script type="text/javascript">

    var loadBalancerValid = #if((!$host && !$port) || ($host && $port))true#{else}false#{end};

    function disableLoadBalancer() {
        $('loadBalancerEnable').checked = false;
        $('loadBalancerDisable').checked = true;
        $('loadBalancerHostName').value = null;
        $('loadBalancerPort').value = null;
        $('loadBalancerStatus').innerHTML = "";
        loadBalancerValid = false;
        $('nextTabButton').disabled = false;
        $('loadBalancerHostName').disabled = true;
        $('loadBalancerPort').disabled = true;
        ie7fix++;
        AjaxUtils.call("$context$path?actionLink=clear&ie7fix=" + ie7fix);
    }

    function enableLoadBalancer() {
        $('loadBalancerEnable').checked = true;
        $('loadBalancerDisable').checked = false;
        $('nextTabButton').disabled = true;
        $('loadBalancerHostName').disabled = false;
        $('loadBalancerPort').disabled = false;
    }

    function urlValidated(response) {
        var message = response.responseText;

        if (message == "ok") {
            $('nextTabButton').disabled = false;
            $('loadBalancerStatus').innerHTML = okString;
            loadBalancerValid = true;
        } else {
            $('nextTabButton').disabled = true;
            $('loadBalancerStatus').innerHTML = errorImage +
                "<small>" + message + "</small>";
            loadBalancerValid = false;
        }
    }

    function validatePrimaryURL() {
        ie7fix++;
        AjaxUtils.call("$context$path?actionLink=validateURL&port=" + 
            $('loadBalancerPort').value + "&ie7fix=" + ie7fix, urlValidated);
    }

    <!--                     -->
    <!-- site name callbacks -->
    <!--                     -->
    function siteNameValidated(body) {
        $('nextTabButton').disabled = eval(loadBalancerValid);
        $('siteNameStatus').innerHTML = okString;
    }

    function siteNameInvalidated(body) {
        loadBalancerValid = false;
        $('nextTabButton').disabled = true;
        $('siteNameStatus').innerHTML = errorImage + '<small>'+body+'</small>';
    }

    function validateSiteName() {
        var params = "host=" + $('loadBalancerHostName').value;
        APP.call("$context$path", "validateSite", params, 
            siteNameValidated, siteNameInvalidated);
    }


    function wizardStep5Init() {
        YAHOO.util.Event.addListener('loadBalancerDisable', "click", disableLoadBalancer );
        YAHOO.util.Event.addListener('loadBalancerEnable', "click", enableLoadBalancer );
        if ( loadBalancerValid ) {
            $('nextTabButton').disabled = false;
            if( $('loadBalancerEnable').checked ) {
                $('loadBalancerHostName').disabled = false;
                $('loadBalancerPort').disabled = false;
                validateSiteName();
                validatePrimaryURL();
            } else {
                $('loadBalancerHostName').disabled = true;
                $('loadBalancerPort').disabled = true;
            }
        } else {
            $('nextTabButton').disabled = true;
        }
    }

    YAHOO.util.Event.onDOMReady( wizardStep5Init );

</script>

<div style="margin-left:10px;">
    <h1>$page.getLocalizedString("step5.title")<img class="pointer" alt="info" src="$context/assets/images/message.gif"/></h1>
    <p>$page.getLocalizedString("step5.description")</p>
    <input type="radio" id="loadBalancerDisable" #if (!$host && !$port) checked="checked"#{end}/><span>&nbsp;$page.getLocalizedString("no.label")</span><br/>
    <input type="radio" id="loadBalancerEnable" #if ($host || $port) checked="checked"#{end}/><span>&nbsp;$page.getLocalizedString("yes.label")</span>

    <div id="loadBalancerModule" style="width:500px;">
        <p id="allfields"><em>*</em>&nbsp;$page.getLocalizedString("required.field.label")</p>
        <b class="xtop"><b class="xt1"></b><b class="xt2"></b><b class="xt3"></b><b class="xt4"></b></b>
            <div class="headerBox">$page.getLocalizedString("step5.sub.title")</div>
        <div class="bodyBox" style="height:180px">
            $page.getLocalizedString("step5.help.message")
            <span>
                <table class="temp">
                    <tr>
                        <td><label for="loadBalancerHostName"><em>*&nbsp;</em>$page.getLocalizedString("site.name.label")</label></td>
                        <td>
                            <input id="loadBalancerHostName" name="loadBalancerHostName" 
                            type="text" value="#if($host)$host#{end}" class="text" 
                            style="width:180px"
                            onkeyup="APP.callDelayed(this, validateSiteName)"    
                            onchange="APP.callDelayed(this, validateSiteName)"/>
                            <span id="siteNameStatus"></span>                    
                        </td>
                    </tr>
                    <tr>
                        <td><label for="loadBalancerPort"><em>*&nbsp;</em>$page.getLocalizedString("primary.url.label")</label></td>
                        <td>
                            <input id="loadBalancerPort" name="loadBalancerPort" 
                            type="text" value="#if($port)$port#{end}" class="text" 
                            style="width:180px"
                            onkeyup="APP.callDelayed(this, validatePrimaryURL)"    
                            onchange="APP.callDelayed(this, validatePrimaryURL)"/>
                            <span id="loadBalancerStatus"></span>                  
                        </td>
                    </tr>
                    <tr>
                </table>
            </span>                 
        </div>
        <div>
            <b class="xbottom">
                <b class="xbGray1"></b>
                <b class="xbGray2"></b>
                <b class="xbGray3"></b>
                <b class="xbGray4"></b>
            </b>
        </div>
    </div>
</div>
